/**
 * Created by YJH on 2018/5/30.
 */

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
    Button,
    AsyncStorage,
    TextInput,
} from 'react-native';
import NavigationBarComponent from './NavigationBarComponent';
import Toast, {DURATION} from 'react-native-easy-toast';

const KEY = 'KEY-Async';
export default class AsyncStoragePage extends Component {

    constructor(props) {
        super(props);

        this.state = {
            inputTxt: '',
            txtFetch: '点击拉取数据',
        }

    }

    _onSave() {

        AsyncStorage.setItem(KEY, this.state.inputTxt, (error) => {
            if (!error) {
                this.toast.show('存储成功', DURATION.LENGTH_SHORT);
            } else {
                this.toast.show('存储失败', DURATION.LENGTH_SHORT);

            }
        });
    }

    _onRemove() {
        AsyncStorage.removeItem(KEY, error => {
            if (!error) {
                this.toast.show('删除成功', DURATION.LENGTH_SHORT);
            } else {
                this.toast.show('删除失败', DURATION.LENGTH_SHORT);
            }
        });
    }

    _onFetch() {
        AsyncStorage.getItem(KEY, (error, result) => {
            if (!error) {
                this.setState({
                    txtFetch: result,
                });
                if (null !== result) {

                    this.toast.show('拉取成功', DURATION.LENGTH_SHORT);
                } else {
                    this.toast.show('无数据可拉取', DURATION.LENGTH_SHORT);
                }
            } else {
                this.toast.show('拉取失败', DURATION.LENGTH_SHORT);
            }
        });
    }

    render() {
        return <View style={styles.container}>
            <NavigationBarComponent
                style={{backgroundColor: '#2196F3'}} title={'AsyncStorage'} statusBar={{backgroundColor: '#2196F3'}}/>


            <TextInput style={styles.edt} onChangeText={inputTxt => this.state.inputTxt = inputTxt}/>
            <View style={styles.container_row}>
                <Button style={styles.btn} title="保存" onPress={() => {
                    this._onSave();
                }}/>

                <Button style={styles.btn} title="移除" onPress={() => {
                    this._onRemove();
                }}/>

                <Button style={styles.btn} title="取出" onPress={() => {
                    this._onFetch()
                }}/>

            </View>

            <Text>{this.state.txtFetch}</Text>

            <Toast ref={toast => this.toast = toast}/>
        </View>
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FCFCFC',
    },

    container_row: {
        backgroundColor: '#FCFCFC',
        flexDirection: 'row',
        alignItems: 'center',
    },

    btn: {
        height: 60,
        margin: 5,
        borderWidth: 10,
        justifyContent: 'space-between',
        alignSelf: 'center',
        marginHorizontal: 15,
    },

    edt: {
        marginTop: 50,
        height: 60,
        marginHorizontal: 15,
    },
});